<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试页面</title>
</head>
<body>
<h1>用户登录-Web前端页面</h1>
<form action="#" method="post" class="login-form">
    <input type="text" placeholder="请输入用户名" class="username"> <br>
    <input type="text" placeholder="请输入密码" class="pass"> <br>
    <input type="text" placeholder="验证码"> <button>发送验证码</button>
    <button onclick="handleLogin()" type="button">登录</button>
</form>

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
    // VConsole 默认会挂载到 `window.VConsole` 上
    var vConsole = new window.VConsole();
</script>

<script>
    /*

    fetch('https://jsonplaceholder.typicode.com/comments?postId=1')
            .then(data => {
                console.log('结果:', data)
            })
            .catch(err => {
                console.log('异常:', err)
            })

    */
    function handleLogin() {
        console.log('in login...')
        const xhr = new XMLHttpRequest()
        xhr.open('GET', 'https://jsonplaceholder.typicode.com/comments?postId=1', true)
        xhr.send()
        xhr.onload = () => {
            const data = xhr.responseText
            console.log('结果:', data)
        }
        xhr.onerror = (err) => {
            console.log('异常:', err)
        }
    }
</script>
</body>
</html>
